---
name: useLoadMore
route: /useLoadMore
menu: 'UI'
edit: false
sidebar: true
---
import JackBox from 'jackbox';

import Demo1 from './demo/demo1';
import Demo1CodeTsx from '!raw-loader!./demo/demo1.tsx';
import Demo1CodeJsx from '!raw-loader!./demo/demo1.jsx';

import Demo2 from './demo/demo2';
import Demo2CodeTsx from '!raw-loader!./demo/demo2.tsx';
import Demo2CodeJsx from '!raw-loader!./demo/demo2.jsx';

import Demo3 from './demo/demo3';
import Demo3CodeTsx from '!raw-loader!./demo/demo3.tsx';
import Demo3CodeJsx from '!raw-loader!./demo/demo3.jsx';

import Demo4 from './demo/demo4';
import Demo4CodeTsx from '!raw-loader!./demo/demo4.tsx';
import Demo4CodeJsx from '!raw-loader!./demo/demo4.jsx';

import Demo5 from './demo/demo5';
import Demo5CodeTsx from '!raw-loader!./demo/demo5.tsx';
import Demo5CodeJsx from '!raw-loader!./demo/demo5.jsx';


# useLoadMore

A Hook that is designed to display paged data incrementally.

**Core Characteristics**

* Async request control(loading, request timing control, etc)
* Logics will be used in common loadMore scenarios
* Support custom data loading method

## Examples

### Click to load more

<JackBox jsCode={Demo1CodeJsx} tsCode={Demo1CodeTsx} demoName='Click to load more' description='Standard loading more examples'>
  <Demo1 />
</JackBox>

### Pull up load more

<JackBox jsCode={Demo2CodeJsx} tsCode={Demo2CodeTsx} demoName='Pull up to load more' description='If ref exists in options, loadMore is automatically triggered when scrolling to the bottom'>
  <Demo2 />
</JackBox>

### Use deps properly

<JackBox jsCode={Demo3CodeJsx} tsCode={Demo3CodeTsx} demoName='use deps properly' description='If the deps changes, reset the current page and re-request the data'>
  <Demo3 />
</JackBox>

### Custom data loading - timestamp mode

<JackBox jsCode={Demo4CodeJsx} tsCode={Demo4CodeTsx} demoName='custom data loading - timestamp mode' description={
  <div>
    If the back-end data is constantly being updated, then just use page, offset, pageSize, etc. to cut the data, and there may be a lot of duplicate data. At this time, if we know the time to pull the data for the first time, then only the data before this timestamp can be cut at the same time, and the correct data can be obtained.<br />
    We will record the current time 'startTime' when we first start the request or reload, and pass it to asyncFn.
  </div>
}>
  <Demo4 />
</JackBox>

### Custom data loading - ID mode

<JackBox jsCode={Demo5CodeJsx} tsCode={Demo5CodeTsx} demoName='custom data loading - ID mode' description={
  <div>
    If the data update frequency is very high, there may be multiple data corresponding to the same timestamp, and the timestamp mode above may have problems. At this point we can get the correct data by the id and offset of the last data.<br />
    If there is an itemKey field in options, we will send the id of the current last data to asyncFn.
  </div>
}>
  <Demo5 />
</JackBox>

## API

```javascript
const result: ReturnValue<Item> = useLoadMore<Result, Item>(
  asyncFn: (params: FnParams) => Promise<Result>,
  options?: Options<Result, Item>,
);

const result: ReturnValue<Item> = useLoadMore<Result, Item>(
  asyncFn: (params: FnParams) => Promise<Result>,
  deps?: any[],
  options?: Options<Result, Item>,
);

```

### Result

| Property    | Description                              | Type       | Default     |
|-------------|------------------------------------------|------------|-------------|
| loading     | Whether it is loading for the first time | boolean    | false       |
| loadingMore | Whether to load more                     | boolean    | false       |
| data        | Full list data                           | any[]      | []          |
| reload      | Reload function                          | () => void | -|          |
| loadMore    | Load more function                       | () => void | -           |
| noMore      | Is there no more data                    | boolean    | false       |
| total       | Total amount of data                     | number \| undefined|- |


### Params

| Property | Description                                                       | Type                 | Default |
|----------|-------------------------------------------------------------------|----------------------|---------|
| asyncFn  | Async request function, params see FnParams                       | (FnParams)=> Promise | -       |
| deps     | Depends on the array, if the deps changes, it will trigger reload | any[]                | []      |
| options  | Optional configuration item, see Options                          | -                    | -       |


### FnParams

| Property  | Description                                                                                                                                  | Type   | Default |
|-----------|----------------------------------------------------------------------------------------------------------------------------------------------|--------|---------|
| page      | Request page number. In general, if your initPageSize is not equal to incrementSize, then page doesn't make sense to you, you can use offset | number | -       |
| pageSize  | The number of requested data, the first page is equal to initPageSize, the non-first page is equal to incrementSize                          | number | -       |
| offset    | Data offset, which is how many pieces of data are currently in existence                                                                     | number | -       |
| id        | The id of the last piece of data will only exist if itemKey is set                                                                           | string | -       |
| startTime | Start timestamp, recorded on the first load or each reload                                                                                   | number | -       |


### Options

| Property      | Description                                                                                     | Type                                                 | Default |
|---------------|-------------------------------------------------------------------------------------------------|------------------------------------------------------|---------|
| initPageSize  | first pageSize                                                                                  | number                                               | 10      |
| incrementSize | PageSize other than the first page, if not set, equals initPageSize                             | number                                               | -       |
| itemKey       | Data id, can be a string or a function                                                          | `string | ((record: Item, index: number) => string)` | -       |
| formatResult  | Format asyncFn request result                                                                   | `(x: Result) => ({ total: number, data: Item[]})`    | -       |
| ref           | The container's ref, if it exists, automatically triggers loadMore when scrolling to the bottom | `RefObject<HTMLElement>`                             | -       |
| threshold     | Set the distance bottom threshold when pulling down autoload                                    | number                                               | 100     |